<template>
    <div class="box">
        <!-- 右上角头像 -->
        <div class="avatar-container">
            <div class="avatar" @click="openProfile">
                <img :src="userInfo.avatar" alt="头像" class="avatar-img">
            </div>
        </div>
        
        <!-- 个人信息弹窗组件 -->
        <workFrom ref="workFromRef" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 导入弹窗组件
import workFrom from './workFrom.vue'

const workFromRef = ref()

// 用户信息数据
const userInfo = ref({
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138000',
    avatar: 'src/assets/auth/authbg.jpg',
})

// 打开个人信息弹窗
const openProfile = () => {
    // 传递 userInfo.value 而不是 userInfo
    workFromRef.value?.open(userInfo.value)
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #f5f5f5;
}

.avatar-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #409eff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>